<%@ page language="java" contentType="text/html; charset=UTF-8"
			    pageEncoding="UTF-8"%>
			    
<%@include file="/WEB-INF/jsp/common/common.jsp" %>

<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div class="layui-container">
			<form class="layui-form" action="${ctx }/employee/update" id="ff">
				<input type="hidden" value="${bean.id}"  name="id"/>
				<div class="layui-form-item">
					<label class="layui-form-label">账号</label>
					<div class="layui-input-block">
						<input type="text" value="${bean.username}" name="username" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">新密码</label>
					<div class="layui-input-block">
						<input type="password" name="password"  placeholder="请输入新密码,如果不需修改就不要填任何东西" autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">姓名</label>
					<div class="layui-input-block">
						<input type="text" value="${bean.name}" name="name" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
					</div>
				</div>
				<!--img-->
				<div class="layui-form-item">
					<label class="layui-form-label">头像</label>
					<div class="layui-input-block">
						<!-- 正真上传头像地址 -->
						<input type="hidden" name="img" value="${bean.img}" id="img" />
						
						<button type="button" class="layui-btn" id="btnFileUpload">
						  <i class="layui-icon">&#xe67c;</i>头像图片
						</button>
						<!-- 图片回显 -->
						<img id="imgShow" src="${bean.img}" width="150px"/>
					</div>
				</div>

				<!--qq-->
				<div class="layui-form-item">
					<label class="layui-form-label">qq</label>
					<div class="layui-input-block">
						<input type="text" name="qq" value="${bean.qq}"  required lay-verify="required" placeholder="请输入qq号" autocomplete="off" class="layui-input">
					</div>
				</div>
				<!--email-->
				<div class="layui-form-item">
					<label class="layui-form-label">email</label>
					<div class="layui-input-block">
						<input type="text" name="email" value="${bean.email}" required lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
					</div>
				</div>
				<!--tel-->
				<div class="layui-form-item">
					<label class="layui-form-label">tel</label>
					<div class="layui-input-block">
						<input type="text" name="tel" value="${bean.tel}" required lay-verify="required|phone" placeholder="请输入电话" autocomplete="off" class="layui-input">
					</div>
				</div>
				<!--sex-->
				<div class="layui-form-item">
					<label class="layui-form-label">性别</label>
					<div class="layui-input-block">
						<c:choose>
							<c:when test="${bean.sex==0 }">
								<input type="radio" name="sex" value="0" title="男" checked>
								<input type="radio" name="sex" value="1" title="女">
							</c:when>
							<c:otherwise>
								<input type="radio" name="sex" value="0" title="男" >
								<input type="radio" name="sex" value="1" title="女" checked>
							</c:otherwise>						
						</c:choose>
					</div>
				</div>
				<!--部门-->
				<div class="layui-form-item">
					<label class="layui-form-label">部门</label>
					<div class="layui-input-block">
						<select name="deptId" lay-verify="required">
							<c:forEach items="${depts }" var="item">
									<c:if test="${bean.deptId==item.id }">
										<option value="${item.id }" selected="selected">${item.name }</option>
									</c:if>
									<c:if test="${bean.deptId!=item.id }">
										<option value="${item.id }">${item.name }</option>
									</c:if>
							</c:forEach>
						</select>
					</div>
				</div>

				<!--入职日期-->  
				<div class="layui-form-item">
					<label class="layui-form-label">入职日期</label>
					<div class="layui-inline">
						<input type="text" name="hiredate" class="layui-input" id="hiredate" value='<fmt:formatDate value="${bean.hireDate }" pattern="yyyy-MM-dd HH:mm:ss"/>'>
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>

		</div>
	</body>

	<!--导入 js 才能使用 layui-->
	<script>
		layui.use(['form', 'laydate','upload'], function() {
			var $ = layui.$;
			/*日期初始化*/
			var laydate = layui.laydate;
			//执行一个laydate实例
			laydate.render({
				elem: '#hiredate',
				type: 'datetime'
			});
			/*表单*/
			var form = layui.form;
			//监听提交
			form.on('submit(formDemo)', function(data) {
				//alert(data);
				/* console.log(data);
				layer.msg(JSON.stringify(data.field));
				alert(JSON.stringify(data.field)); //json变成string
				alert(data.field); //json对象
				alert(data.field.password); */
				//layer.msg(data.field);
				var result  = $("#ff").serialize();
				//alert(result);
				 $.ajax({
					url: "${ctx }/employee/update",
					data:result,
					type:"post",
					success:function(msg){
						//alert(msg);
						parent.closeUpdate();
					}
				}); 
				
				
				return false; //放行吗
			});
			/*文件上传*/
			var upload = layui.upload;
			//创建一个上传组件
			
			/*<div class="layui-input-block">
						<!-- 正真上传头像地址 -->
						<input type="hidden" name="img" value="${bean.img}" id="img" />
						
						<button type="button" class="layui-btn" id="btnFileUpload">
						  <i class="layui-icon">&#xe67c;</i>头像图片
						</button>
						<!-- 图片回显 -->
						<img id="imgShow" src="${bean.img}" width="150px"/>
					</div>*/
			
			upload.render({
			  elem: '#btnFileUpload'
			  ,url: '${ctx}/file/img'
			  ,field : 'pic'
			  ,done: function(res, index, upload){ //上传后的回调
				  	alert(res.code);
					alert(res.data); //http:location:8080/eplxx/xx.jpg
					document.getElementById("img").value=res.data;
					document.getElementById("imgShow").src=res.data;
			  } 
			});
		});
	</script>
<script type="text/javascript">
	
</script>

</html>